$selector-color: #eee;
$font-color: #989898;
$choice-hover: #e8f6f4;
$white: #fff;
$icon-color: #b9b9b9;

* {
    box-sizing: border-box;
}
.bg-selector-container {
    position: relative;
}
.bg-selector-bar {
    width: 100%;
    background-color: $selector-color;
    padding: 5px;
    cursor: pointer;
    overflow: hidden;
}
.bg-selector-content {
    float: left;
    // margin-left: 10px;
    color: $font-color;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bg-selector-icon {
    position: absolute;
    width: 5px;
    height: 5px;
    right: 5px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid $icon-color;
    border-bottom: 5px solid transparent;
    top: 10px;
}
.bg-selector-icon.open{
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid $icon-color;
    top: 5px;
}
.bg-selector-choice {
    width: 100%;
    padding: 5px;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bg-selector-choice:hover {
    background-color: $choice-hover;
}
.bg-choice-list {
    position: absolute;
    top: 25px;
    width: 100%;
    max-height: 300px;
    background-color: $white;
    box-shadow: 1px 2px 4px 0px rgba(159, 159, 159, 0.5);
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
